<template>
	<view class="audio-contronal">
		<view>
			<up-popup :show="isaudio" @close="updateisAudio" :overlay="!isaudio" zIndex="10" bgColor="transparent">
				<view class="context" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd('isaudio')">
					<view class="nav">
						<up-icon class="nav-icon" name="arrow-down" size="25" @click="updateisAudio"
							color="#fff"></up-icon>
						<view class="nav_info">
							<text>{{songDetails.audioName}}</text>
							<text>{{songDetails.singerName}}</text>
						</view>
						<up-icon class="nav-icon" name="share" size="25" color="#fff"></up-icon>
					</view>
					<view class="core" v-show="isCore" @click="showCore('cd')">
						<view class="probe">
							<image src="../../static/audio-icons/probe.png" class="probe_img"></image>
						</view>
						<view class="cd">
							<image :src="songDetails.imageSrc" class="cd_img"></image>
						</view>
						<view class="p_btm">
							<view @click.stop="updateSrc">
								<up-image class="like" src="../../static/audio-icons/Like.png" width="28px"
									height="28px" v-show="!islike"></up-image>
								<up-image class="like" src="../../static/audio-icons/Red_Heart.png" width="28px"
									height="28px" v-show="islike"></up-image>
							</view>
							<view class="like_num" v-show="!islike">100w+</view>
							<up-image src="../../static/audio-icons/download.png" width="28px" height="28px"></up-image>
							<up-image src="../../static/audio-icons/Ringtones.png" width="28px"
								height="28px"></up-image>
							<up-image src="../../static/audio-icons/comment.png" width="28px" height="28px"></up-image>
							<view class="cent_num">1w+</view>
							<up-image src="../../static/audio-icons/more.png" width="28px" height="28px"></up-image>
						</view>
					</view>

					<!-- 歌词 -->
					<scroll-view scroll-y="true" :scroll-top="scrollTop" scroll-with-animation="true" class="lyric"
						v-show="!isCore" @scroll="lyricScroll" @click="showCore('lrc')">
						<view class="detail" @touchmove="lyricTouch" @touchend="lyricTouchEnd">
							<view v-for="(item,i) of ms" :key="i" class="c_text">
								<text
									:style="(i == msIndex) ? {color: 'rgba(255, 255, 255, 0.9)'} : ((i == scrollIndex && srcollShow) ? {color: 'rgba(255, 255, 255, 0.7)'} : {})">
									{{item.c}}
								</text>
							</view>
							<view style="height: 45vh;"></view>
						</view>
					</scroll-view>
					<!-- 时间线 -->
					<view class="timeline" v-show="srcollShow">
						<image src="../../static/audio-icons/Jump_Play.png" @click="JumpPlayTime"></image>
						<view class="xian"></view>
						<text>{{convertToMinutesAndSeconds(nowPlayTime)}}</text>
					</view>
					<view class="btom">
						<view class="pace">
							<text style="margin-left: 20px;">{{convertToMinutesAndSeconds(playtime)}}</text>
							<up-slider v-model="playtime" min="0" :max="audio.duration" :blockSize="blockSize"
								activeColor="rgba(255, 255, 255, 0.5)" inactiveColor="rgba(255, 255, 255, 0.2)"
								class="slider" @change="updatePlayTime" @changing="updatePlayTimeing"></up-slider>
							<text style="margin-right: 20px;">{{convertToMinutesAndSeconds(audio.duration)}}</text>
						</view>
						<view class="btom-menu">
							<up-image :src="playMode.imgSrc" width="28px" height="28px"
								@click="updatePlayMode(this.playMode)"></up-image>
							<up-image src="../../static/audio-icons/Previous_Song.png" width="28px" height="28px"
								@click="cutSong('back')"></up-image>
							<up-image src="../../static/audio-icons/play.png" width="50px" height="50px"
								style="margin-top: -10px;" @click="play" v-show="!isplay"></up-image>
							<up-image src="../../static/audio-icons/suspend.png" width="50px" height="50px"
								style="margin-top: -10px;" @click="play" v-show="isplay"></up-image>
							<up-image src="../../static/audio-icons/Next_Song.png" width="28px" height="28px"
								@click="cutSong('next')"></up-image>
							<up-image src="../../static/audio-icons/Music_menu.png" width="28px" height="28px"
								@click="list" class="list"></up-image>
						</view>
					</view>
				</view>
			</up-popup>
		</view>
		<!-- 歌单 -->
		<view>
			<up-popup :show="show" @close="list" zIndex="10" overlayStyle="z-index:10" bgColor="transparent">
				<view class="up-popup" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd('show')">
					<view class="list_head">
						<view class="text">
							<text>当前播放</text>
							<text>({{this.urls.length}})</text>
						</view>
						<view class="icon">
							<view class="left" @click="updatePlayMode(this.playMode)">
								<image :src="playMode.imgSrc"></image>
								<text style="font-size: 15px;font-weight: 100;">{{playMode.name}}</text>
							</view>
							<view class="right">
								<image src="../../static/audio-icons/download.png"></image>
								<image src="../../static/audio-icons/Add_favorites.png"></image>
								<image src="../../static/audio-icons/delete.png"></image>
							</view>
						</view>
					</view>
					<scroll-view scroll-y="true" class="list">
						<view v-for="(item,index) in urls" :key="index">
							<view class="list_item" @click="refreshAudio({item,index})">
								<image src="../../static/audio-icons/Playback_effect.png" class="list_icon"
									v-show="(playing == index)"></image>
								<view class="list_name">
									<view class="list_name_text">
										<text>{{item.name}}&nbsp;<text>-&nbsp;{{item.singerName}}</text></text>
									</view>
								</view>
								<view class="inter" v-show="(playing == index)">来源</view>
								<view @click.stop="dAudio(index)">
									<uni-icons type="closeempty" size="25" class="close" color="#535353"></uni-icons>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</up-popup>
		</view>
		<!-- 底部 -->
		<view class="audio-btom">
			<view class="audioContro">
				<image :src="songDetails.imageSrc" @click="updateisAudio" class="audio_img"></image>
				<text>{{songDetails.audioName}}&nbsp;&nbsp;-<text>{{songDetails.singerName}}</text></text>
			</view>
			<view class="b_icon">
				<up-icon name="play-circle" size="28" class="play" @click="play" v-show="!isplay"></up-icon>
				<up-icon name="pause-circle" size="28" class="play" @click="play" v-show="isplay"></up-icon>
				<up-image src="../../static/audio-icons/music-list.png" width="28px" height="28px" @click="list"
					class="list"></up-image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
	} from 'vuex'
	export default {
		name: "my-audio",
		props: ['audioBtom'],
		computed: {
			...mapState('audio', ['songDetails', 'audio', 'isbtom', 'isplay',
				'playTime', 'currentTime', 'animation_play_state', 'animation_probe', 'isanimation',
				'show', 'isaudio', 'startY', 'moveY', 'list_moveBy', 'lyric_moveby', 'threshold', 'dragging',
				'urls', 'Lrc', 'ms', 'msIndex', 'scrollIndex', 'srcollShow', 'likeSrc', 'islike', 'nowPlayTime',
				'playing', 'cdFade', 'lrcFade', 'isCore', 'scrollTop', 'PlayTimeing', 'blockSize', 'playMode'
			]),
			playtime: {
				get() {
					return this.playTime
				},
				set(newVal) {
					this.modelPlayTime(newVal)
				}
			},
		},
		data() {
			return {
				audioBotom:0
			}
		},
		created() {
			if(this.audioBtom != undefined){
				this.audioBotom = this.audioBtom;
			}
			if(this.songDetails.audioSrc == ''){
				this.refreshAudio({
					item: this.urls[0],
					index: 0
				})
			}
			this.audioset()
			this.queryLrc();
			uni.$on('addAudioList', (data) => {
				this.updateUrls(data)
			})

		},
		onBackPress() {
			this.closePopup();
			return true;
		},
		methods: {
			...mapMutations('audio', ['updateSongDetails', 'play', 'audioset', 'songDetailsAudioSrc', 'refreshAudio',
				'deleteAudio', 'updatePlayTimeing', 'updatePlayTime', 'list', 'updateisAudio', 'queryLrc',
				'touchStart', 'touchMove', 'touchEnd',
				'lyricTouch', 'lyricTouchEnd', 'lyricScroll', 'JumpPlayTime', 'updateSrc', 'showCore',
				'watchMoveY', 'watchCurrentTime', 'watchScrollTop', 'modelPlayTime', 'updateUrls', 'updatePlayMode'
			]),
			formatTime(minutes, seconds) {
				// 将分钟和秒数转换为字符串，并使用 padStart 确保它们都是两位数
				const formattedMinutes = String(minutes).padStart(2, '0');
				const formattedSeconds = String(seconds).padStart(2, '0');
				return `${formattedMinutes}:${formattedSeconds}`;
			},
			convertToMinutesAndSeconds(totalSeconds) {
				const total = Math.round(totalSeconds)
				const minutes = Math.floor(total / 60);
				const seconds = total % 60;
				return this.formatTime(minutes, seconds);
			},
			dAudio(i) {
				this.iconIndex = i;
				this.deleteAudio(i)
			},
			cutSong(val) {
				if (val == 'next') {
					if (this.playing == (this.urls.length - 1)) {
						thie.refreshAudio({
							item: this.urls[0],
							index: 0
						})
						return
					}
					this.refreshAudio({
						item: this.urls[this.playing + 1],
						index: this.playing + 1
					})
				} else {
					if (this.playing == 0) {
						uni.showToast({
							title: '前面没有了',
							duration: 1000
						});
						return
					}
					this.refreshAudio({
						item: this.urls[this.playing - 1],
						index: this.playing - 1
					})
				}
			},
			closePopup() {
				if (this.show) {
					this.list();
				} else if (this.isaudio) {
					this.updateisAudio();
				}
			}
		},
		watch: {
			moveY(newVal) {
				this.watchMoveY(newVal);
			},
			isaudio(newVal) {},
			'songDetails.audioSrc'(newVal,oldVal) {
				this.songDetailsAudioSrc({newVal,oldVal});
			},
			currentTime(newVal) {
				this.watchCurrentTime(newVal);
			},
			scrollTop(newVal) {
				this.watchScrollTop(newVal);
			}
		}
	}
</script>

<style lang="scss">
	.audio-contronal {
		.context {
			height: 100vh;
			background-color: rgba(13, 13, 13, 0.6);
			backdrop-filter: blur(60rpx);
			transform: translateY(v-bind(lyric_moveby));
			transition: transform 0.2s;
			z-index: 1;
			position: relative;

			.nav {
				position: absolute;
				top: 60rpx;
				display: flex;
				width: 750rpx;
				justify-content: space-between;

				.nav-icon {
					width: 100rpx;
					margin: 20rpx;
					display: flex;
					justify-content: center;

					&:active {
						transition: background-color 0.2s ease-in;
						border-radius: 30rpx;
						background-color: rgba(252, 252, 252, 0.5);
					}
				}

				.nav_info {
					width: 260rpx;
					height: 100rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					text-align: center;

					:nth-of-type(1) {
						font-size: 36rpx;
						color: #dadada;
					}

					:nth-of-type(2) {
						font-size: 32rpx;
						margin-top: 4px;
						color: #bdbdbd;
					}
				}
			}

			.core {
				width: 750rpx;
				height: 70vh;
				position: absolute;
				top: 180rpx;
				opacity: v-bind(cdFade);
				transition: opacity 0.5s;

				.probe {
					.probe_img {
						position: absolute;
						top: 20rpx;
						right: 60rpx;
						width: 360rpx;
						height: 200rpx;
						transition: transform 0.5s;
						transform: rotate(v-bind(animation_probe));
						transform-origin: 20% top;
						z-index: 1;
					}
				}

				.cd {
					position: absolute;
					top: 140rpx;
					width: 500rpx;
					height: 500rpx;
					background-image: linear-gradient(rgb(0, 0, 0), rgba(64, 64, 64, 0.8), rgb(0, 0, 0));
					border: 4px solid rgba(175, 175, 175, 0.3);
					backdrop-filter: blur(20rpx);
					border-radius: 300rpx;
					margin-left: 120rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					.cd_img {
						width: 340rpx;
						height: 340rpx;
						border-radius: 200rpx;
						animation: rotate 10s linear infinite v-bind(animation_play_state);
					}
				}

				.p_btm {
					position: absolute;
					bottom: 20rpx;
					width: 750rpx;
					height: 100rpx;
					display: flex;
					justify-content: space-around;

					.like:active {
						transform: scale(1.5);
						transition: transform 0.1s;
					}

					%base {
						position: absolute;
						font-size: 20rpx;
						width: 70rpx;
						height: 20rpx;
						border-radius: 20rpx;
						color: #dadada;
						opacity: 1;
						background-color: rgba(81, 81, 81, 0.8);
						display: flex;
						justify-content: center;
						backdrop-filter: blur(20rpx);
						z-index: 1;
					}

					.like_num {
						@extend %base;
						left: 80rpx;
					}

					.cent_num {
						@extend %base;
						right: 140rpx;
					}

					&>* {
						height: 60rpx;
						opacity: 0.7;
					}
				}
			}

			.timeline {
				position: absolute;
				// top: 35vh;
				top: 480rpx;
				left: 20rpx;
				right: 20rpx;
				height: 100rpx;
				display: flex;
				justify-content: space-between;
				line-height: 100rpx;

				image {
					margin-top: 36rpx;
					opacity: 0.5;
					width: 30rpx;
					height: 30rpx;
				}

				.xian {
					height: 1rpx;
					width: 500rpx;
					margin: 50rpx;
					background-color: #ffffff;
				}

				text {
					font-size: 24rpx;
					color: #919191;
				}
			}

			.lyric {
				width: 750rpx;
				height: 68vh;
				position: absolute;
				top: 180rpx;
				overflow: hidden;
				opacity: v-bind(lrcFade);
				transition: opacity 0.5s;

				.detail {
					position: absolute;
					top: 400rpx;
					bottom: 400rpx;
					left: 0;
					right: 0;
					text-align: center;
					color: rgba(255, 255, 255, 0.5);
					line-height: 100rpx;

					.c_text {
						height: 7vh;
						font-size: 32rpx;
					}
				}
			}

			.btom {
				position: absolute;
				bottom: 0;
				width: 750rpx;
				height: 300rpx;

				.pace {
					display: flex;
					justify-content: space-around;
					height: 120rpx;

					&>text {
						line-height: 120rpx;
						font-size: 20rpx;
						width: 50rpx;
						color: rgba(255, 255, 255, 0.7);
					}

					.slider {
						margin-top: 20rpx;
						width: 500rpx;
					}
				}

				.btom-menu {
					margin-top: 40rpx;
					display: flex;
					justify-content: space-around;

					:nth-of-type(3) {
						opacity: 0.9;
					}

					:nth-of-type(4) {
						opacity: 0.9;
					}

					&>* {
						opacity: 0.7;
					}
				}
			}
		}

		.up-popup {
			background-color: rgba(255, 255, 255, 0.6);
			backdrop-filter: blur(60rpx);
			height: 750rpx;
			margin: 0 40rpx 30rpx 40rpx;
			z-index: 10;
			padding: 20rpx;
			transform: translateY(v-bind(list_moveBy));
			transition: transform 0.1s;
			border-radius: 50rpx;
			overflow: hidden;

			.list_head {
				border-bottom: 1px solid #707070;
				height: 160rpx;

				.text {
					margin-top: 20rpx;
					margin-left: 8px;
					font-size: 36rpx;
					font-weight: bold;

					:nth-of-type(2) {
						font-size: 24rpx;
						color: #919191;
					}
				}

				.icon {
					margin-top: 20rpx;
					height: 60rpx;
					display: flex;
					justify-content: space-between;

					image {
						width: 46rpx;
						height: 46rpx;
					}

					.left {
						margin-left: 8px;
						width: 180rpx;
						display: flex;
						justify-content: space-between;
						line-height: 60rpx;
					}

					.right {
						width: 240rpx;
						display: flex;
						justify-content: space-between;
						margin-right: 8px;

						:nth-of-type(2) {
							margin: 3px;
							width: 40rpx;
							height: 40rpx;
						}
					}
				}
			}

			.list {
				width: 640rpx;
				height: 560rpx;
				margin: 0 -20rpx;

				.list_item {
					position: relative;
					height: 60rpx;
					display: flex;
					line-height: 60rpx;
					padding: 20rpx;

					.list_icon {
						margin-top: 14rpx;
						margin-left: 14rpx;
						width: 30rpx;
						height: 30rpx;
					}

					.list_name {
						width: 350rpx;
						overflow: hidden;

						.list_name_text {
							width: 750rpx;
							
							&>text {
								font-size: 32rpx;
								margin-left: 20rpx;
								color: #212121;

								&>text {
									font-size: 24rpx;
									color: rgba(228, 228, 228, 0.8);
								}
							}
						}

					}

					.inter {
						margin-top: 16rpx;
						background-color: rgba(219, 219, 219, 0.8);
						width: 60rpx;
						height: 30rpx;
						font-size: 20rpx;
						display: flex;
						justify-content: center;
						line-height: 30rpx;
						border-radius: 40rpx;
						position: absolute;
						right: 129rpx;
						top: 16rpx;
					}

					.close {
						position: absolute;
						top: 20rpx;
						right: 20rpx;
					}

					&:active {
						transition: background-color 0.2s ease;
						background-color: #dadada;
					}
				}
			}
		}

		.audio-btom {
			background-color: rgba(205, 205, 205, 0.5);
			backdrop-filter: blur(20rpx);
			position: fixed;
			display: flex;
			justify-content: space-between;
			bottom: v-bind(audioBotom);
			width: 100%;
			height: 80rpx;
			transition: background-color 0.3s ease-in;

			&:active {
				transition: background-color 0.3s ease-in;
				background-color: #dadada;
			}

			.audioContro {
				display: flex;
				text-align: center;
				margin-left: 20rpx;
				line-height: 80rpx;
				font-size: 28rpx;
				color: rgb(228, 228, 228);

				.audio_img {
					margin-top: -8px;
					width: 64rpx;
					height: 64rpx;
					border-radius: 50rpx;
					border: 7px solid #051927;
					animation: rotate 8s linear infinite v-bind(animation_play_state);
				}

				@keyframes rotate {
					50% {
						transform: rotate(180deg);
					}

					100% {
						transform: rotate(360deg);
					}
				}

				&>text {
					margin-left: 20rpx;

					&>text {
						margin-left: 20rpx;
						font-size: 20rpx;
						color: rgba(228, 228, 228, 0.8);
					}
				}
			}

			.b_icon {
				display: flex;
				justify-content: space-around;
				width: 200rpx;

				.play {
					width: 60rpx;
					border-radius: 20rpx;

					&:active {
						transition: background-color 0.1s ease-in;
						background-color: #1c1c1c;
					}
				}

				.list {
					margin-top: 4px;
					opacity: 0.9;
					width: 60rpx;
					border-radius: 20rpx;

					&:active {
						transition: background-color 0.3s ease-in;
						background-color: #1c1c1c;
						transform: scale(1.2);
						transition: transform 0.2s;
					}
				}
			}
		}
	}
</style>